<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		
		<style>
			.header {
				display: flex;
				align-items: center;
				background-color: #fff;
				padding-top: 25px;
				padding-bottom: 10px;
				padding-left: 10px;
				padding-right: 10px;
				justify-content: space-around;
				position: fixed;
				left: 0;
				right: 0;
			}

			.search {
				display: flex;
				align-items: center;
				padding: 10px;
				border-radius: 6px;
				background-color: #ededed;
				height: 40px;
			}

			.text {
				font-weight: 600;
				color: #e12025;
			}
			
			.main{
				padding-top: 75px;
			}

			.top {
				padding: 10px;
				background-color: #fff;
			}

			.title {
				display: flex;
				align-items: center;
				margin-bottom: 10px;
			}

			.title .text {
				color: #9c9c9c;
				font-size: 16px;
				font-weight: 600;
				margin-left: 5px;
			}

			.tags {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 10px;
			}

			.tag-item {
				color: #58595b;
				padding: 4px 8px;
				border-radius: 15px;
				background-color: #f4f4f4;
				font-size: 14px;
				font-weight: 600;

			}

			.shop {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 4px;
			}

			.shop-item {
				background-color: #fff;
				overflow: hidden;
			}

			.shop-item img {
				width: 100%;
				height: 120px;
			}

			.shop-item .info {
				padding: 10px;
			}

			.shop-item .info .title {
				font-size: 16px;
			}

			.shop-item .info .price {
				font-weight: 700;
				font-size: 16px;
				color: #e44f48;
			}

			.shop-item .info span {
				font-size: 20px;
			}
		</style>
	</head>

	<body>
		<header class="header">
			<span class="mui-action-back mui-icon mui-icon-arrowleft"></span>
			<div class="search">
				<input type="text" style="border: none;background-color: #ededed;padding: 0;margin: 0;" />
				<span class="mui-icon mui-icon-camera"></span>
			</div>
			<div id="searchBtn" class="text">
				搜索
			</div>
		</header>
		<div class="main">
			<div class="top">
				<div class="title">
					<span class="mui-icon mui-icon-help"></span>
					<span class="text">搜索历史</span>
				</div>
				<div class="tags">
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
				</div>

				<div class="title">
					<span class="mui-icon mui-icon-help"></span>
					<span class="text">搜索历史</span>
				</div>
				<div class="tags">
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
					<div class="tag-item">
						你好
					</div>
				</div>
				<div class="title" style="background-color: #fff;margin-bottom: 0;">
					<span class="mui-icon mui-icon-help"></span>
					<span class="text">精品推荐</span>
				</div>
			</div>
			<div class="bottom">
				<!-- 商品列表 -->
				<div class="shop">
					<div class="shop-item">
						<img src="images/cbd.jpg" alt="" />
						<div class="info">
							<div class="title">标题</div>
							<p class="desc">7天无理由退货</p>
							<div class="price">
								￥<span>258</span>
							</div>
						</div>
					</div>
					<div class="shop-item">
						<img src="images/cbd.jpg" alt="" />
						<div class="info">
							<div class="title">标题</div>
							<p class="desc">7天无理由退货</p>
							<div class="price">
								￥<span>258</span>
							</div>
						</div>
					</div>
					<div class="shop-item">
						<img src="images/cbd.jpg" alt="" />
						<div class="info">
							<div class="title">标题</div>
							<p class="desc">7天无理由退货</p>
							<div class="price">
								￥<span>258</span>
							</div>
						</div>
					</div>
					<div class="shop-item">
						<img src="images/cbd.jpg" alt="" />
						<div class="info">
							<div class="title">标题</div>
							<p class="desc">7天无理由退货</p>
							<div class="price">
								￥<span>258</span>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>